<template>
  <div class="annotation-canvas">
    <canvas 
      ref="canvasRef" 
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  imageSrc: {
    type: String,
    required: true
  }
})

const canvasRef = ref(null)
const isDrawing = ref(false)
const ctx = ref(null)

onMounted(() => {
  const canvas = canvasRef.value
  ctx.value = canvas.getContext('2d')
  
  // 设置画布尺寸
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
})

function startDrawing(event) {
  isDrawing.value = true
  const rect = canvasRef.value.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top
  
  ctx.value.beginPath()
  ctx.value.moveTo(x, y)
}

function draw(event) {
  if (!isDrawing.value) return
  
  const rect = canvasRef.value.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top
  
  ctx.value.lineTo(x, y)
  ctx.value.stroke()
}

function stopDrawing() {
  isDrawing.value = false
}
</script>

<style scoped>
.annotation-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

canvas {
  border: 1px solid #ccc;
  cursor: crosshair;
}
</style>
